.cq-btn--s2n2 {
	position: relative;
	padding: 15px 50px;
  border: none;
	color: #fff;
	box-shadow: none;
	background-color: transparent;
	background-image: none;

	&::before {
		position: absolute;
		display: block;
		content: attr(value);
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		padding: inherit;
		box-sizing: border-box;
		border-radius: 200px;
		background-color: transparent;
		box-shadow: 0px 6px 30px 0px rgba(46, 60, 255, 0.45);
		background-image: linear-gradient(89deg, #6a11cb 0%, #005bea 100%);
	}

	&::after {
		position: absolute;
		display: block;
		content: attr(value);
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		padding: inherit;
		box-sizing: border-box;
		border-radius: 200px;
		background-color: transparent;
		box-shadow: 0px 6px 30px 0px rgba(255, 192, 46, 0.45);
		background-image: linear-gradient(89deg, #ffa024 0%, #ffe91c 100%);
		opacity: 0;
		transition: all 0.15s ease-out;
	}

	&:focus,
	&:hover {
		background-color: transparent;
		color: #fff;

		&::before {
			box-shadow: none;
		}

		&::after {
			opacity: 1;
		}
	}

	&.is-reverse {
		&::before {
			box-shadow: 0px 6px 30px 0px rgba(255, 192, 46, 0.45);
			background-image: linear-gradient(89deg, #ffa024 0%, #ffe91c 100%);
		}

		&::after {
			box-shadow: 0px 6px 30px 0px rgba(46, 60, 255, 0.45);
			background-image: linear-gradient(89deg, #6a11cb 0%, #005bea 100%);
		}
	}
}
